<template>
  <t-dialog :header="header" @confirm="onSubmit" :confirmBtn="{
        content: loading?'提交中...':'确认',
        theme: 'primary',
        loading: loading,
      }"
            :visible.sync="visible" :onClose="closeDialog"     :closeOnOverlayClick="false"
            width="40%">
    <t-form ref="form" labelAlign="top" class="step-form"  :data="formData" :rules="rules"
            labelWidth="180px">
      <t-form-item label="旧密码" name="oldPassword">
        <t-input clearable autocomplete="new-password" type="password" v-model="formData.oldPassword" :maxlength="20"
                 placeholder="请输入密码"></t-input>
      </t-form-item>
      <t-form-item label="新密码" name="newPassword">
        <t-input clearable autocomplete="new-password" type="password" v-model="formData.newPassword" :maxlength="20"
                 placeholder="请输入密码"></t-input>
      </t-form-item>
      <t-form-item label="确认密码" name="confirmPassword">
        <t-input clearable autocomplete="new-password" type="password" v-model="formData.confirmPassword" :maxlength="20"
                 placeholder="请输入密码"></t-input>
      </t-form-item>
    </t-form>
  </t-dialog>
</template>

<script>
// import { encrypt } from "@/utils/jsencrypt";
import { encrypt } from "@/utils/encrypt";

export default {
  name: "reset-pwd",
  props: {
    header: {
      type: String,
      default: '',
    },
    objId:{
      type: Number,
      default: 0
    },
  },
  data(){
    return {
      visible: true,
      loading: false,
      formData:{
        oldPassword: '',
        newPassword: '',
        confirmPassword: '',
      },
      rules:{
        oldPassword: [
          {
            required: true,
            message: "旧密码不能为空",
          }
        ],
        newPassword: [
          {
            required: true,
            message: "新密码不能为空",
          },
          {
            pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9~!@#$%^&*]{8,20}/,
            message: '请输入 8-20 个字符，需同时包含数字、字母以及特殊符号',
            type: 'error',
            trigger: 'blur'
          },
        ],
        confirmPassword: [
          {
            required: true,
            message: "确认密码不能为空",

          },
          {
            pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9~!@#$%^&*]{8,20}/,
            message: '请输入 8-20 个字符，需同时包含数字、大小写字母以及特殊符号',
            type: 'error',
          },
          {validator: (val) => val===this.formData.newPassword, message: "两次密码不一致", type: "error"}
        ],
      }
    }
  },
  methods:{
    onSubmit() {
      this.$refs.form.validate().then((validateResult) => {
        if (validateResult === true) {
          this.loading = true;
          this.$api.system.user.updateUserPwd({
            ...this.formData,
            oldPassword: encrypt(this.formData.oldPassword),
            newPassword: encrypt(this.formData.newPassword),
            confirmPassword: encrypt(this.formData.confirmPassword)
          }).then(response => {
            this.$message.success("重置密码成功");
            this.$store.dispatch('user/LogOut').then(() => {
              this.$router.push(`/login`);
            }).catch((err) => {
              this.$store.dispatch('user/FedLogOut');
              this.$router.push(`/login`);
            });
            this.$emit("reload");
            this.$emit("update:visible", false);
            this.loading = false;
          }).catch((e) => {
            this.loading = false;
            this.$message.error(e.toString());
          });
        }else{
          const firstError = Object.values(validateResult)[0]?.[0]?.message;
          this.$message.error(firstError);
        }
      });
    },
    closeDialog() {
      this.$emit("update:visible", false);
    },
  }
}
</script>

<style scoped>

</style>
